<div class="page">
    <form #calcForm="ngForm" class="gz-form">
        <input type="number" (keyup)="showResult=false" [(ngModel)]="jiBen" name="jiben" required min="1800" autocomplete="off" placeholder="您的基本工资/不能低于最低工资标准">
        <input type="number" (keyup)="showResult=false" [(ngModel)]="jiXiao" name="jiXiao" autocomplete="off" placeholder="您的绩效工资">
        <input type="number" (keyup)="showResult=false" [(ngModel)]="jiangJin" name="jiangJin" autocomplete="off" placeholder="您的奖金">
        <button (click)="calc();" [disabled]="!calcForm.form.valid">开始计算</button>
    </form>
    <section *ngIf="showResult">
        <dl>
            <dt>工资总额</dt>
            <dd>¥{{result.total | number:'1.2-2'}}</dd>
        </dl>
        <div class="hr"></div>
        <dl class="zhichu">
            <dt>养老 {{settings.yangLao | percent:'1.2-3'}}</dt>
            <dd>¥{{result.sheBao.yangLao | number:'1.2-2'}}</dd>
        </dl>
        <div></div>
        <dl class="zhichu">
            <dt>医疗 {{settings.yiLiao | percent:'1.2-3'}}</dt>
            <dd>¥{{result.sheBao.yiLiao | number:'1.2-2'}}</dd>
        </dl>
        <div></div>
        <dl class="zhichu">
            <dt>失业 {{settings.shiYe | percent:'1.2-3'}}</dt>
            <dd>¥{{result.sheBao.shiYe | number:'1.2-2'}}</dd>
        </dl>
        <div></div>
        <dl class="zhichu">
            <dt>工伤 {{settings.gongShang | percent:'1.2-3'}}</dt>
            <dd>¥{{result.sheBao.gongShang | number:'1.2-2'}}</dd>
        </dl>
        <div></div>
        <dl class="zhichu">
            <dt>生育 {{settings.shengYu | percent:'1.2-3'}}</dt>
            <dd>¥{{result.sheBao.shengYu | number:'1.2-2'}}</dd>
        </dl>
        <div></div>
        <dl class="zhichu">
            <dt>公积金 {{settings.gongJiJin | percent:'1.2-3'}}</dt>
            <dd>¥{{result.sheBao.gongJiJin | number:'1.2-2'}}</dd>
        </dl>
        <div></div>
        <dl class="zhichu">
            <dt>社保统筹</dt>
            <dd>¥{{result.sheBao.tongChou | number:'1.2-2'}}</dd>
        </dl>
        <div class="hr"></div>
        <dl>
            <dt>计税工资</dt>
            <dd>¥{{result.jiShui | number:'1.2-2'}}</dd>
        </dl>
        <div></div>
        <dl class="zhichu">
            <dt>个人所得税</dt>
            <dd>¥{{result.shui | number:'1.2-2'}}</dd>
        </dl>
        <div class="hr"></div>
        <dl class="result">
            <dt>实发工资</dt>
            <dd>¥{{result.shiFa | number:'1.2-2'}}</dd>
        </dl>
        <div></div>
    </section>
</div>